<!--  -->
<template>
  <div class=''>
    <el-dialog
      title="明细"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="itemAll">
        <div class="items bgc">
          <span>公司名称：</span>
          <span>{{item.companyName | isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span style="width:124px;text-align:left;">关联房产编号：</span>
          <span>{{item.ctContractProject | isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>应缴月份：</span>
          <span>{{item.payCost?item.payCost.substring(0,8).replace('-','年').replace('-','月'):'' | isNotNull}}</span>
        </div>
        <div class="items">
          <span>应缴金额(元)：</span>
          <span>{{item.totalAmount | isNotNull}}</span>
        </div>
        <div class="items">
          <span>联系人：</span>
          <span>{{item.name | isNotNull}}</span>
        </div>
        <div class="items">
          <span>联系方式：</span>
          <span>{{item.phone | isNotNull}}</span>
        </div>
        <!-- <div class="items">
          <span>关联合同编号：</span>
          <span>{{item.contractNumber}}</span>
        </div> -->
        <div class="items bgc">
          <span>合同起止日期：</span>
          <span>{{item.rentStartTime}}至{{item.rentEndTime}}</span>
        </div>
        <div class="items bgc">
          <span>面积(㎡)：</span>
          <span>{{item.projectArea | isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>市场管理费单价(元/㎡月)：</span>
          <span>{{item.unitPriceId | isNotNull}}</span>
        </div>

        <div class="items">
          <span>市场管理费总额(年/元)：</span>
          <span>{{item.totalAmount | isNotNull}}</span>
        </div>
        <div class="items">
          <span>合同签约时间：</span>
          <span>{{item.signDate | isNotNull}}</span>
        </div>
        <div class="items">
          <span>缴费状态：</span>
          <span>{{item.isPayment | paymentStatusFilter(that) }}</span>
        </div>
        <div class="items bgc">
          <span>缴费方式：</span>
          <span>{{item.payType | payTypeFilter(that) | isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>缴费日期：</span>
          <span>{{item.paymentTime | isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>是否开票：</span>
          <span>{{item.isInvoice!=null?item.isInvoice?'否':'是':'' | isNotNull}}</span>
        </div>
        <div class="items">
          <span>发票类型：</span>
          <span>{{item.invoiceType!=null?item.invoiceType?'增值税专用发票':'增值税普通发票':''| isNotNull}}</span>
        </div>
        <div class="items">
          <span>发票抬头：</span>
          <span>{{item.invoiceHead!=null?item.invoiceHead?item.name:item.companyName:''| isNotNull}}</span>
        </div>
        <div class="items">
          <span>纳税人识别号：</span>
          <span>{{item.taxRateNumber| isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>发票票号：</span>
          <span>{{item.invoiceNumber| isNotNull}}</span>
        </div>
        <div class="items bgc">
          <span>操作人：</span>
          <span>{{item.updateByName| isNotNull}}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getDetail } from '@/api/management/index'
import { getDicType } from '@/api/common'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      item: {

      },
      that: this,
      paymentOptions: [],
      paymentStatusOptions: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    isNotNull (value) {
      if (value) {
        return value
      } else {
        return '/'
      }
    },
    paymentStatusFilter (value, that) {
      let str = ''
      that.paymentStatusOptions.forEach(item => {
        if (item.value == value) {
          str = item.label
        }
      })
      return str
    },
    payTypeFilter (value, that) {
      let str = ''
      that.paymentOptions.forEach(item => {
        if (item.value == value) {
          str = item.label
        }
      })
      return str
    }
  },
  // 方法集合
  methods: {
    handleClose () {
      this.dialogVisible = false
    },
    init (id) {
      this.dialogVisible = true
      getDetail(id).then(res => {
        this.item = res.data.data
      })
      getDicType('payment_method').then(res => {
        this.paymentOptions = res.data.data
      })
      getDicType('payment_status').then(res => {
        this.paymentStatusOptions = res.data.data
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.itemAll {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 33%;
    padding: 10px 0px 10px 10px;
    display: flex;
    span:first-child {
      text-align: right;
    }
    span:last-child {
      padding-left: 10px;
    }
  }
}
.bgc {
  background-color: aliceblue;
}
</style>